Skip to content

[local-explorer-ui] Improve observability logs, id search, and event-to-trace navigation - #14941

Open
nickpatt wants to merge 10 commits into
cloudflare:mainfrom
nickpatt:local-explorer-observability-ui-fixes
Open

[local-explorer-ui] Improve observability logs, id search, and event-to-trace navigation#14941
nickpatt wants to merge 10 commits into
cloudflare:mainfrom
nickpatt:local-explorer-observability-ui-fixes

Conversation

@nickpatt

@nickpatt nickpatt commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Four fixes to the Local Explorer Observability views (Traces / Events).

1. Readable log messages
console.log is captured as a JSON-encoded array of its arguments, so multi-arg logs rendered as a raw array, e.g. ["request failed:","D1_ERROR: …"]. formatLogMessage now renders the array the way the console would — strings verbatim, everything else as JSON, space-joined (request failed: D1_ERROR: …). Both log renderers (the Events list and the inline invocation logs) now share this one function.

2. Search by id
The Traces and Events search bars couldn't look up a span/trace id. Added trace:<id> / span:<id> query terms (with traceid/trace_id aliases), and free-text search now also matches trace/span ids — so pasting a bare id just finds it. Prefix matching means the truncated ids shown in the list work too. Documented in the query-syntax popover.

3. "View trace" from an event
Each event row with a span_id now has a button that jumps to the Traces view, auto-expands that event's trace waterfall, and scrolls it into view (via a ?trace=<id> deep link).

4. Drop the redundant page-title view switcher
The sidebar already switches between the Traces and Events views, so the extra dropdown in each page title was duplicative. Replaced it with a plain title and removed the now-unused ObservabilityViewSwitcher component.


  • Tests
    • Tests included/updated
    • Automated tests not possible - manual testing has been completed as follows:
    • Additional testing not necessary because:
  • Public documentation
    • Cloudflare docs PR(s):
    • Documentation not necessary because: internal local-dev tooling UI (the Local Explorer Observability tab); no public API or documented surface change.

Open in Devin Review

@changeset-bot

changeset-bot Bot commented Jul 30, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 112e524

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@cloudflare/vite-plugin Minor
wrangler Minor
@cloudflare/vitest-pool-workers Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-project-automation github-project-automation Bot moved this to Untriaged in workers-sdk Jul 30, 2026
@workers-devprod
workers-devprod requested review from a team and penalosa and removed request for a team July 30, 2026 20:22
@workers-devprod

workers-devprod commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Codeowners approval required for this PR:

  • ✅ @cloudflare/wrangler
Show detailed file reviewers

devin-ai-integration[bot]

This comment was marked as resolved.

@pkg-pr-new

pkg-pr-new Bot commented Jul 30, 2026

Copy link
Copy Markdown
@cloudflare/autoconfig

npm i https://pkg.pr.new/@cloudflare/autoconfig@14941

@cloudflare/build-output-utils

npm i https://pkg.pr.new/@cloudflare/build-output-utils@14941

@cloudflare/config

npm i https://pkg.pr.new/@cloudflare/config@14941

create-cloudflare

npm i https://pkg.pr.new/create-cloudflare@14941

@cloudflare/deploy-helpers

npm i https://pkg.pr.new/@cloudflare/deploy-helpers@14941

@cloudflare/kv-asset-handler

npm i https://pkg.pr.new/@cloudflare/kv-asset-handler@14941

miniflare

npm i https://pkg.pr.new/miniflare@14941

@cloudflare/pages-functions

npm i https://pkg.pr.new/@cloudflare/pages-functions@14941

@cloudflare/pages-shared

npm i https://pkg.pr.new/@cloudflare/pages-shared@14941

@cloudflare/unenv-preset

npm i https://pkg.pr.new/@cloudflare/unenv-preset@14941

@cloudflare/vite-plugin

npm i https://pkg.pr.new/@cloudflare/vite-plugin@14941

@cloudflare/vitest-pool-workers

npm i https://pkg.pr.new/@cloudflare/vitest-pool-workers@14941

@cloudflare/workers-auth

npm i https://pkg.pr.new/@cloudflare/workers-auth@14941

@cloudflare/workers-editor-shared

npm i https://pkg.pr.new/@cloudflare/workers-editor-shared@14941

@cloudflare/workers-utils

npm i https://pkg.pr.new/@cloudflare/workers-utils@14941

wrangler

npm i https://pkg.pr.new/wrangler@14941

commit: 112e524

devin-ai-integration[bot]

This comment was marked as resolved.

…d add a changeset

The Events "View trace" button now carries the event's span_id, and the
Traces view resolves it to the invocation row whose spans actually contain
that span (findInvocationRoot), instead of always landing on the first row
sharing the trace_id. Row element ids are keyed by (trace_id, root_span_id)
so they stay unique across a multi-invocation trace.
devin-ai-integration[bot]

This comment was marked as resolved.

Comment thread .changeset/local-explorer-observability-ui-fixes.md Outdated
Comment thread packages/local-explorer-ui/src/components/observability/InvocationLogs.tsx Outdated
Comment thread packages/local-explorer-ui/src/routes/observability/events.tsx Outdated
Comment thread .changeset/local-explorer-observability-ui-fixes.md Outdated
Comment thread packages/local-explorer-ui/src/routes/observability/index.tsx
@github-project-automation github-project-automation Bot moved this from Untriaged to In Review in workers-sdk Jul 31, 2026
@petebacondarwin
petebacondarwin removed the request for review from penalosa July 31, 2026 10:15
…, parser edge-case tests

- Changeset is a minor (adds id search + View trace), not a patch; backtick console.log.
- Render a muted "(no message)" placeholder for empty logs to avoid layout shift (Events + InvocationLogs).
- Add trace:/span: parser edge cases: valueless tokens fall back to free text, id aliases, and id-lookup alongside a clause.
- Summarise the deep-link effect with a one-line comment.
devin-ai-integration[bot]

This comment was marked as resolved.

…search params

Switch the Events "View trace" button to a router-aware link (createLink around
Kumo's LinkButton) so it supports open-in-new-tab / copy-link, while the router
keeps typed search params. Added a validateSearch to the /observability route
(worker/trace/span) so the link and deep-link reads are typed (drops the casts).
The link passes an explicit search object (worker + trace + span) instead of
spreading the Events view's params, and the onClick now only stopPropagation on
the clickable row.
devin-ai-integration[bot]

This comment was marked as resolved.

nickpatt added 2 commits July 31, 2026 12:19
The reveal effect only worked if the trace was already in the default
trace-list window (100 rows, no id filter), but events go 200 deep, so a
deep-linked trace could sit permanently outside that window and the View trace
button would silently do nothing. Seed the search with `trace:<id>` when the
deep link is present so the specific row is fetched via the traceId filter; if
it still doesn't come back the trace is gone and the existing empty state (with
the visible trace: filter) explains that.
…search

Free-text search matched trace/span ids with %q% (substring anywhere), so on
hex ids any short term like "de" matched almost every record and effectively
disabled filtering. Match ids by prefix (q%), consistent with the trace:/span:
filters, while keeping substring matching for names, messages, service, and
attributes.
devin-ai-integration[bot]

This comment was marked as resolved.

nickpatt added 2 commits July 31, 2026 12:36
… from the URL

The ?trace=&span= params were consumed but left in the URL. Because the view
switcher preserves search params and the Traces route remounts on each visit
(resetting the applied/seeded refs), the stale trace param re-seeded the
trace:<id> query and re-expanded the row on every return, hiding other traces
even after the user cleared the search. Capture the deep link once at mount and
strip trace/span from the URL (replace navigation, keeping worker), so it only
applies once.
…ability page titles

The sidebar already switches between the Traces and Events views, so the
duplicate dropdown in each page title added no value. Replace it with a plain
title and remove the now-unused ObservabilityViewSwitcher component.
@nickpatt nickpatt changed the title [local-explorer-ui] Improve observability logs, id search, and event-to-trace navigation [local-explorer-ui] Improve observability views and hide internal dev-log noise Jul 31, 2026
@nickpatt
nickpatt force-pushed the local-explorer-observability-ui-fixes branch from eb93628 to 73b824f Compare July 31, 2026 20:10
@nickpatt nickpatt changed the title [local-explorer-ui] Improve observability views and hide internal dev-log noise [local-explorer-ui] Improve observability logs, id search, and event-to-trace navigation Jul 31, 2026

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 1 new potential issue.

View 4 additional findings in Devin Review.

Open in Devin Review

@NuroDev
NuroDev enabled auto-merge (squash) August 3, 2026 16:59

@workers-devprod workers-devprod left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Codeowners reviews satisfied

@github-project-automation github-project-automation Bot moved this from In Review to Approved in workers-sdk Aug 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Approved

Development

Successfully merging this pull request may close these issues.

3 participants